<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<div class="container">
    <jigsaw-button (click)="getTableData()">GetTableData</jigsaw-button>
    <jigsaw-tabs [(selectedIndex)]="selectedIndex">
        <jigsaw-tab-pane *ngFor="let tabData of tabDatas">
            <div jigsaw-title><span class="fa fa-gift"></span>{{tabData.title}}</div>
            <ng-template>
                <jigsaw-table height="400px" [data]="this[tabData.key]"></jigsaw-table>
            </ng-template>
        </jigsaw-tab-pane>
        <jigsaw-tab-pane>
            <div jigsaw-title><span class="fa fa-gift"></span>table data</div>
            <ng-template>
                <jigsaw-table height="400px" [data]="tableData"></jigsaw-table>
            </ng-template>
        </jigsaw-tab-pane>
        <jigsaw-tab-pane title="a looooooooooooooooooong tab name">
            <ng-template>
                <jigsaw-input #myInput width="80%">
                    <a jigsaw-prefix-icon><span class="fa fa-search"></span></a>
                </jigsaw-input>
            </ng-template>
        </jigsaw-tab-pane>
    </jigsaw-tabs>
    {{selectedIndex}}
</div>
